<template>
  <div class="tab">
      <ul class="tabs">
          <li @click="light = 1">
              
              <router-link to="/" :class="[{active : light == 1},'ico']"><span class="iconfont icon-dianying"></span></router-link>
          </li>
          <li @click="light = 2">
              <router-link to="/vido" :class="[{active: light == 2},'ico']"><span class="iconfont icon-shipin"></span>
                </router-link>
          </li>
          <li @click="light = 3">
              <router-link to="/user" :class="[{active : light == 3},'ico']"><span class="iconfont icon-wode"></span></router-link>
          </li>
          
      </ul>

  </div>
</template>

<script>
export default {
    data(){
        return{
            light:1,
        };
    },

};
</script>

<style lang="scss" scoped>


 .tab{
            width: 100%;
            // min-height: 100vh;
            background-color: white;
            position: fixed;
            bottom: 0;
              height: 6vh;
            line-height: 6vh;
            text-align: center;
            z-index: 999;
        }
        .tab .tabs{
            width: 100%;
            display: flex;
            
        }
       
        .tab .tabs li{
            flex:1;
           
        }
       .tab .tabs li a.active{
            
            color: brown;

        }
        .tab .tabs li .ico{
            display: block;
            color: darkgrey;
        }
    span{
        font-size: 40px;
    }
</style>>